<template>
	<div id="app">
		<transition :name="transitionName">
			<keep-alive>
				<router-view v-if="$route.meta.keepAlive" class="animate-container"/>
				<router-view
					v-if="!$route.meta.keepAlive"
					class="animate-container"
					:key="'time' + new Date().getTime()"
				/>
			</keep-alive>
		</transition>
	</div>
</template>

<script>
export default {
	name: "App",
	data () {
		return {
			transitionName: '',
		}
	},
    watch: {
        $route (to, from) {
            if (to.meta.index > from.meta.index) {
                this.transitionName = 'slide-left'
            } else if (to.meta.index < from.meta.index) {
                this.transitionName = 'slide-right'
            } else {
                this.transitionName = ''
            }
        },
    },
};
</script>

<style scoped lang="less">
	#app {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.animate-container {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		min-height: 100vh;
	}
	.slide-left-enter,
	.slide-right-leave-to {
		transform: translate3d(100%, 0, 0);
	}
	.slide-right-enter,
	.slide-left-leave-to {
		transform: translate3d(-20%, 0, 0);
	}
	.slide-left-enter-active,
	.slide-left-leave-active {
		transition: transform 0.4s ease;
	}
	.slide-right-enter-active,
	.slide-right-leave-active {
		transition: transform 0.4s ease;
	}
	.slide-right-leave-active {
		z-index: 2;
	}
</style>
